<template>
	<div class="add_seckill" v-loading="loading">
		<h2>秒杀活动报名</h2>
		<div class="content">
			<div class="step1">
				<img src="../../../assets/images/manage/sameCity/step1_1.png" alt="" />
			</div>
			<div class="common">
				<h6>商品选择：</h6>
				<div class="up_img" :class="{reds:red1}">
					<div class="up_img_border" @click.stop="goUpload" v-if="selGoodsData.length===0">
						<img class="no_up_img" src="../../../assets/images/manage/sameCity/upload2.png" alt="" />
						<span>添加要秒杀的商品</span>
						<p>请选择一件参与秒杀活动的商品</p>
					</div>
					<div class="up_img_border" style="border:none;" @click.stop="goUpload" v-if="selGoodsData.length>0">
						<img class="have_up_img" :src="selGoodsData[0].face_path" alt="" />
						<div class="text">
							<p>{{ selGoodsData[0].title }}</p>
							<p>￥{{ selGoodsData[0].price | twoDecimal }}</p>
						</div>
					</div>
				</div>
			</div>
			<div class="step2">
				<img src="../../../assets/images/manage/sameCity/step2_1.png" alt="" />
			</div>
			<div class="platform_info">
				<div class="seckill_types">
					<p>选择秒杀类型:</p>
					<div class="seckill_type">
						<p v-for="item in typeData" :key="item.id" :class="{gray:typeIndex===item.id}" @click="selType(item.id,item.original_price,item.price)">{{ item.type_name }}</p>
					</div>
				</div>
				<transition name="fade">
					<div class="platform_lists" v-if="typeIndex!==-1">
						<p :style="{left:lefts*100+'%'}"></p>
						<div class="platform_list">
							<h4>你的秒杀商品将在以下平台中显示</h4>
							<div class="lists" v-loading="loading">
								<div class="list" v-for="item in platData" :key="item.id">
									<img :src="item.face_path" alt="" />
									<h3>{{ item.platform_name }}</h3>
									<p>秒杀专场</p>
								</div>
								<div v-if="noPlatform" class="no_list">该类型暂无数据</div>
							</div>
						</div>
					</div>
				</transition>
			</div>
			<div class="step3">
				<img src="../../../assets/images/manage/sameCity/step3.png" alt="" />
			</div>
			<div class="prices">
				<h3>原价/秒杀价格：</h3>
				<input type="number" v-model.trim="input1" readonly="readonly" placeholder="商品原价格" title="商品原价" />
				<input type="number" :class="{reds:red2}" v-model.trim="input2" placeholder="秒杀价格" title="秒杀价格" />
			</div>
			<div class="inventory">
				<h3>设置秒杀库存：</h3>
				<el-input-number style="margin-left:20px;" v-if="selGoodsData.length>0" v-model="input3" controls-position="right" :min="1" :max="selGoodsData[0].stock"></el-input-number>
				<el-input-number style="margin-left:20px;" v-if="selGoodsData.length===0" v-model="input3" controls-position="right" :min="1" :max="99"></el-input-number>
				<span class="maxs" v-if="selGoodsData.length>0">此商品最大库存为：{{ selGoodsData[0].stock }}</span>
			</div>
			<div class="seckill_period">
				<h3>秒杀排期：</h3>
				<el-date-picker v-model="value1" :class="{reds:red4}" style="margin:0 15px 0 20px;" @change="selTime" :picker-options="pickerOptions0" :clearable="false" type="date" placeholder="选择日期">
				</el-date-picker>
				<div class="seckill_time">
					<div class="seckill_title">
						<p>场次</p>
						<p>秒杀时间段</p>
						<p>请选择</p>
					</div>
					<div class="time_lists">
						<div class="time_list" v-for="item in periodData" :key="item.id">
							<p>{{ item.num_field }}</p>
							<p>{{ item.start_time }}&nbsp;~&nbsp;{{ item.end_time }}</p>
							<p>
								<button v-if="+item.status===0" :class="{blues:selPeriodId===item.id}" style="background:#e5004f;" @click="selPeriod(item)">
									<span v-if="selPeriodId!==item.id">未满</span>
									<span v-if="selPeriodId===item.id">已选本场</span>
								</button>								
								<button v-if="+item.status===1" style="background:#f27fa7;cursor:default;">已满</button>
								<button v-if="+item.status===2" style="background:#606266;cursor:default;">已过期</button>
							</p>
						</div>
						<div class="no_time_list" v-if="noPeriod">暂无本场数据</div>
					</div>
				</div>
			</div>
			<div class="step4">
				<img src="../../../assets/images/manage/sameCity/step4.png" alt="" />
			</div>
			<div class="pay_price">
				<h4>原价：<span v-if="originPrice>0">￥{{ originPrice | twoDecimal }}</span></h4>
				<h3>现价：<span v-if="nowPrice>0">￥{{ nowPrice | twoDecimal }}</span></h3>
			</div>
			<div class="remain_pay">
				<el-checkbox v-model="checked"></el-checkbox>
				<p>使用余额支付</p>
				<p v-if="balances">当前余额￥{{ balances | twoDecimal }}</p>
			</div>
			<div class="btns">
				<button @click="goBack">返回</button>
				<button v-if="signStatus===1" @click="sign">立即报名</button>
				<button v-if="signStatus===2" @click="sign">已报名，未支付</button>
				<button v-if="signStatus===3" style="background:#909399;cursor:default;">已报名</button>
			</div>
		</div>
		<!-- 选择秒杀商品dialog -->
		<el-dialog title="" top="0" :visible.sync="showDialog" width="730" style="border-radius:6px;" :show-close="false">
			<div class="have_goods">				
				<div class="select_imgs">
					<h6>请选择要参与秒杀活动的商品：</h6>
					<div class="nav_lists">
						<div class="nav_list" v-for="item in navData" :key="item.id" :class="{sel: navIndex === item.id}" @click="selNav(item)">{{ item.cat_name }}</div>						
					</div>
					<div class="model_datas">
						<div class="model_data" v-for="(item,index) in gData" :key="index" @click="selSec(item)">
							<div class="model_img" @click="selImg(item)">
								<img :src="item.face_path" alt="" />
								<img class="sel" v-if="selGoodsData.length>0&&selGoodsData[0].id===item.id" src="../../../assets/images/manage/sameCity/selected.png" alt="" />
							</div>
						</div>
						<div class="no_goods" v-if="noGoods">
							<p>暂无数据</p>
							<!-- <p @click="goAdd">前往添加</p> -->
						</div>
					</div>					
					<div class="buttons">
						<button @click="ensures">确认</button>
						<button @click="cancels">取消</button>
					</div>
				</div>
			</div>			
		</el-dialog>
		<!-- 选择支付方式 -->
		<el-dialog
		title=""
		:visible.sync="dialog3"
		:close-on-click-modal="false"
		width="50%"				
		center>
			<div class="payments">
				<p>请选择以下支付方式</p>
				<div class="sel_payways">
					<p @click="ensure3(2)"><img src="../../../assets/images/manage/activityPromote/zfb.png" alt=""></p>
					<p @click="ensure3(3)"><img src="../../../assets/images/manage/activityPromote/weixinpay.png" alt=""></p>
					<p @click="ensure3(1)" class="disable1"><span>余额支付</span><span>可用0元</span></p>					
				</div>				
			</div>			
		</el-dialog>
		<!-- 支付帮助 -->
		<el-dialog
		title=""
		:visible.sync="dialog4"		
		:close-on-click-modal="false"
		@close="close4"
		width="50%"		
		center>
			<div class="payments_help">				
				<h5>请在新开的页面完成支付。</h5>
				<div class="pay_finish" v-if="isFinishedPay">
					<img src="../../../assets/images/manage/activityPromote/finish.png" alt="">
					<p>如已经完成支付，请点击：</p>
					<button @click="finishPay">已完成支付</button>
				</div>	
				<div class="pay_finish" v-if="!isFinishedPay">
					<img src="../../../assets/images/manage/activityPromote/help.png" alt="">
					<p>如付款遇到问题，你可以：</p>
					<button @click="continuePay">重新支付</button>
				</div>
				<div class="go_help">
					<p @click="goHelp">查看支付帮助</p>
					<span></span>
					<span></span>
				</div>			
			</div>			
		</el-dialog>	
		<!-- 模拟表单 -->
		<form action="" method="post" id="form1" target="_blank"></form>
		<!-- 微信二维码 -->
		<el-dialog
		title=""
		:visible.sync="dialog5"		
		width="50%"		
		center>
			<div class="weixinTe">请使用微信扫一扫完成支付</div>
			<div class="weixin">
				<img style="max-width:500px;" :src="weixinURL" alt="">				
			</div>			
		</el-dialog>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie.js'
	export default {
		name: 'add_seckill',
		props: ['data'],
		data() {
			return {
				//禁止选择过去日期
				pickerOptions0: {
					disabledDate(time) {
						return time.getTime() < Date.now() - 8.64e7;
					}
				},
				loading: true,
				showDialog: false,
				pgoodsData: [],
				selGoodsData: [],
				noData: false,
				selImgIndex: -1,
				typeIndex: 0,
				noPlatform: false,
				input1: '',
				input2: '',
				input3: '',
				value1: '',
				checked: true,
				input4: '', //dialog搜索
				typeData: [],
				platData: [],
				periodData: [],
				selPeriodData: [],
				selPeriodId: 0,
				noPeriod: false,
				red1: false,
				red2: false,
				red3: false,
				red4: false,
				balances: '',
				flags: true,
				dialog3: false,						
				payParams: 0,
				dialog4: false,		
				isFinishedPay: false,	
				showCheck: '',	
				weixinURL: '',
				weixinCODE: '',
				dialog5: false,
				signStatus: 1,
				originPrice: 0,
				nowPrice: 0,
				navData: [],
				navIndex: 0,
				gData: [],	
				page3: 1,	
				pageSize3: 6,
				noGoods: false
			}
		},
		components: {

		},
		computed: {
			lefts() {
				if(this.typeIndex % 6 === 1) {
					return 0.16;
				} else if(this.typeIndex % 6 === 2) {
					return 0.29;
				} else if(this.typeIndex % 6 === 3) {
					return 0.43;
				} else if(this.typeIndex % 6 === 4) {
					return 0.57;
				} else if(this.typeIndex % 6 === 5) {
					return 0.71;
				} else if(this.typeIndex % 6 === 0) {
					return 0.85;
				} else {
					return -0.9;
				}
			}
		},
		watch: {
			selGoodsData: {
				handler(val) {
					if(val.length > 0) {
						this.red1 = false;						
					}
				},
				deep: true
			},
			input2: {
				handler(val) {
					if(val) {
						this.input2 = +val;
						this.red2 = false;
					}
				},
				deep: true
			},
			input3: {
				handler(val) {
					if(val) {
						this.red3 = false;
					}
				},
				deep: true
			},
			value1: {
				handler(val) {
					if(val) {
						this.red4 = false;
					}
				},
				deep: true
			}
		},
		created() {			
			clearInterval(this.showCheck);			
			//默认明天日期
			let d = new Date();
			d.setDate(d.getDate() + 1);
			this.value1 = d;
			this.selTime();
		},
		mounted() {
			this.getType();
			this.getNav();
		},
		methods: {			
			getType() {
				let obj = {};
				obj.userinfo = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN')
				};
				this.$axiosGet('/api/miaosha/getType', {
					data: JSON.stringify(obj)
				}).then(res => {
					if(res.code === 200) {
						this.typeData = res.data;
						this.typeIndex = res.data[0].id;
						this.originPrice = res.data[0].original_price;
						this.nowPrice = res.data[0].price;
						let obj2 = {};
						obj2.userinfo = {
							uid: getCookie('UID'),
							token: getCookie('TOKEN')
						};						
						this.getPlatform(this.typeIndex);
						this.getBalance();
					}
				})
			},
			getBalance() {
				let obj = {};
				obj.userinfo = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN')
				};
				this.$axiosPost('/api/miaosha/balance', {
					data: JSON.stringify(obj)
				}).then(res => {
					if(res.code === 200) {
						this.balances = +res.data;						
					}
				})
			},
			selPeriod(obj) {
				this.selPeriodData = [];
				this.selPeriodId = 0;
				this.selPeriodData.push(obj);
				this.selPeriodId = obj.id;
			},
			getPlatform(id) {
				this.platData = [];
				this.noPlatform = false;
				this.loading = true;
				let obj = {};
				obj.userinfo = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN')
				};
				obj.id = id;
				this.$axiosGet('/api/miaosha/getPlatform', {
					data: JSON.stringify(obj)
				}).then(res => {
					if(res.code === 200) {
						this.platData = res.data;
						this.loading = false;
					} else if(res.code === 404) {
						this.noPlatform = true;
						this.loading = false;
					}
				})
			},
			selType(id, oPrice, price) {
				this.typeIndex = id;
				this.originPrice = oPrice;
				this.nowPrice = price;
				this.getPlatform(id);
			},
			goUpload() {
				this.showDialog = true;								
			},
			getNav() {
				let obj = {};
				obj.token = getCookie('TOKEN');
				obj.uid = getCookie('UID');
				obj.shop_id = this.data.id;				
				obj.flag_id = 1;
				this.$axiosGet('/social-ads/adCampaign/getAppCate.json', obj, true).then(res => {
					if (res.code === 200) {
						this.navData = res.data;
						this.navIndex = res.data[0].id;											
						this.getG(); 
					}					
				});
			},
			selNav(obj) {
				this.navIndex = obj.id;
				this.page3 = 1;
				this.gData = [];
				this.getG();				
			},
			selSec(arr) {
				this.selGoodsData = [];
				this.selGoodsData.push(arr);	
				this.showDialog = false;			
			},
			getG() {						 	
				this.noGoods = false;	
				let obj = {};
				obj.token = getCookie('TOKEN');
				obj.uid = getCookie('UID');
				obj.shop_id = this.data.id;				
				obj.flag_id = 1;
				obj.cat_id = this.navIndex;
				obj.page = this.page3;
				obj.limit = this.pageSize3;
				this.$axiosGet('/social-ads/adCampaign/getProm.json', obj, true).then(res => {
					if (res.code === 200) {						
						 this.gData = res.data;
					} else if (res.code === 404) {
						this.noGoods = true; 
						this.gData = [];											
					}					
				});
			},			
			goAdd() {
				this.$emit('goAddGoods');
			},			
			//选中秒杀商品
			selImg(arr) {
				this.selGoodsData = [];
				this.selGoodsData.push(arr);
				this.input1 = +this.selGoodsData[0].price;
			},
			ensures() {
				this.showDialog = false;
			},
			cancels() {
				this.showDialog = false;
				this.selGoodsData = [];
			},
			goBack() {
				this.$emit('goBack');
			},
			selTime() {
				this.periodData = [];
				this.noPeriod = false;
				let obj = {};
				obj.userinfo = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN')
				};
				obj.seckill_date = this.format(this.value1.getTime());
				this.$axiosGet('/api/miaosha/getChangci', {
					data: JSON.stringify(obj)
				}).then(res => {
					if(res.code === 200) {
						this.periodData = res.data;
					} else if(res.code === 404) {
						this.noPeriod = true;
					}
				})
			},
			//立即报名
			sign() {				
				if(this.selGoodsData.length === 0) {
					this.red1 = true;
					this.goTop();
				}
				if(this.input2.length === 0) {
					this.red2 = true;
					this.goTop(800);
				}
				if(this.input3.length === 0) {
					this.red3 = true;
					this.goTop(810);
				}
				if(this.value1.length === 0) {
					this.red4 = true;
					this.goTop(820);
				}
				if(this.red1 || this.red2 || this.red3 || this.red4) {
					return;
				}
				if(this.selGoodsData[0].stock === 0) {
					this.$alert('该商品库存为0，请重新选择商品！', '提示', {
						callback: action => {
							this.goTop();
						}
					});
					return;
				}
				if(!this.checked) {
					this.$alert('请选择余额支付', '提示');
					return;
				}
				if(!this.flags) {
					return;
				}
				let obj = {};
				obj.userinfo = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN')
				};
				obj.goods_id = this.selGoodsData[0].id;
				obj.itype_id = this.typeIndex;
				obj.platform_id_arr = [];
				this.platData.forEach((i, v) => {
					obj.platform_id_arr.push(i.store_id);
				})
				if(obj.platform_id_arr.length === 0) {
					this.$alert('该秒杀类型暂无商品，请重新选择！', '提示', {
						callback: action => {
							this.goTop(400);
						}
					});
					return;
				}
				obj.original_price = this.input1;
				obj.sale_price = this.input2;
				obj.stock = this.input3;
				if(this.selPeriodData.length===0){
					this.$alert('请选择秒杀场次！', '提示');
					return;
				}
				obj.start_time = this.format(this.value1.getTime()) + ' ' + this.selPeriodData[0].start_time;
				obj.end_time = this.format(this.value1.getTime()) + ' ' + this.selPeriodData[0].end_time;
				obj.shop_id = this.data.id;
				obj.face_path = this.selGoodsData[0].face_path;
				obj.title = this.selGoodsData[0].title;
				obj.shop_name = this.data.title;
				obj.source_from = 3; //来源  1-app 2-微信 3-网页
				obj.changci_id = this.selPeriodId;
				//console.log(obj);return;
				this.$axiosPost('/api/miaosha/applySeckill', {
					data: JSON.stringify(obj)
				}).then(res => {	
					if (res.code === 200) {						
						this.payParams = res.id;												
						this.dialog3 = true;
					} else if (res.code === 201) {
						this.$alert(res.msg, '提示');
					}									
				})
			},
			format(val) {
				let y = new Date(val).getFullYear();
				let m = new Date(val).getMonth() + 1 >= 10 ? new Date(val).getMonth() + 1 : '0' + (new Date(val).getMonth() + 1);
				let d = new Date(val).getDate() >= 10 ? new Date(val).getDate() : '0' + new Date(val).getDate();
				return y + "-" + m + "-" + d;
			},
			//确定支付
			ensure3(val) {									
				let type = '';
				let self = this;
				if (val === 1) {
					type = 'balance';
				}else if (val === 2) {
					type = 'Alipay';
				}else {
					type = 'Wechat';
				}										
				this.$payOrder(type,this.payParams,'platform.miaosha').then(res => {					
					if (res.code === 200) {	
						this.signStatus = 2;																									
						if (val === 2) { //支付宝							
							//-----------------window.open(res.data); //用这个浏览器会拦截，改为表单提交---------------
							this.dialog3 = this.dialog5 = false;
							this.dialog4 = true;
							let form1 = document.getElementById('form1');
							form1.setAttribute('action', res.data);							
							form1.submit();																																																						
						}else if (val === 3) { //微信
							let obj = {};						
							obj.code = res.data.code;	
							obj.url = res.data.url;
							this.weixinURL = res.data.url;
							this.weixinCODE = res.data.code;
							this.dialog3 = false;
							this.dialog4 = false;
							this.dialog5 = true;																																
						}else if (val === 1) { //余额

						}
						self.showCheck = setInterval(() => {
							self.checkStatus(res.id);
						}, 3000);
					}										
				});
			},					
			close4() {				
				clearInterval(this.showCheck);
			},	
			//完成支付
			finishPay() {
				this.dialog3 = false;
				this.dialog4 = false;				
				clearInterval(this.showCheck);
			},			
			//继续支付
			continuePay() {
				this.dialog3 = true;
				this.dialog4 = false;
				clearInterval(this.showCheck);
			},			
			//轮询活动付款状态
			checkStatus(ids) {				
				let obj = {};
				let self = this;
				obj.uid = getCookie('UID');
				obj.token = getCookie('TOKEN');	
				obj.id = ids;			
				this.$axiosGet('/payment/pays/checkpaystatus.json', obj, true).then( res => {										
					//data.code  支付状态0未支付,1支付成功，-1已退款，-2已取消	
					if (res.code === 200) {
						if (res.data.code === 1) { //完成支付
							this.dialog4 = true;
							this.dialog3 = this.dialog5 = false;
							this.isFinishedPay = true;		
							this.signStatus = 3;
							this.$message.success('报名成功', '提示');
							setTimeout(() => {
								self.goBack()
							}, 2000);					
							clearInterval(this.showCheck);
						} else if (res.data.code === 1) {
							this.isFinishedPay = false;							
						}
					}
				});
			},
			//查看帮助
			goHelp() {
				window.open('/utils/docs/content/10410.html');
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.add_seckill {
		text-align: left;
		padding-bottom: 50px;		
		.reds {
			border: 1px solid #eb6877!important;
		}
		>h2 {
			font-size: 34px;
			color: #333;
			font-weight: 400;
			padding: 38px 0 28px 70px;
			border-bottom: 1px solid #e0e0e0;
		}
		.content {
			padding-bottom: 56px;
			border: 1px solid #e0e0e0;
			border-bottom: none;
			border-right: none;
			.step1 {
				margin: 9px 0 0 1px;
			}
			.common {
				display: flex;
				align-items: center;
				padding: 0 0 0 70px;
				margin-top: 30px;
				overflow: hidden;
				>h6 {
					font-size: 14px;
					color: #233040;
					font-weight: 400;
					white-space: nowrap;
				}
				.act_subject {
					width: 80%;
					border: 1px solid #d2d6df;
					height: 46px;
					padding: 0 15px;
					&::placeholder {
						color: #c2cdd9;
					}
				}
				.up_img {
					width: 350px;
					height: 204px;
					border: 1px solid #d2d6df;
					display: flex;
					align-items: center;
					justify-content: center;
					.up_img_border {
						width: 92%;
						height: 88%;
						border: 2px dashed #d2d6df;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						text-align: center;
						cursor: pointer;
						position: relative;
						.no_up_img {
							width: 54px;
							height: 53px;
						}
						.have_up_img {
							width: 100%;
						}
						span {
							font-size: 14px;
							color: #0099e9;
							margin: 14px 0 8px 0;
						}
						p {
							font-size: 14px;
							color: #233040;
						}
						.text {
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
							display: flex;
							justify-content: space-between;
							padding: 0 20px;
							p {
								color: #fff;
							}
						}
					}
				}
				>p {
					font-size: 14px;
					color: #65717f;
					align-self: flex-end;
					margin: 0 0 20px 18px;
				}
			}
			.step2 {
				margin: 18px 0 20px 0;
				img {
					width: 127px;
					height: 43px;
				}
			}
			.platform_info {
				.seckill_types {
					width: 92%;
					margin: 0 auto;
					display: flex;
					>p {
						font-size: 14px;
						color: #233040;
						white-space: nowrap;
						margin-top: 14px;
					}
					.seckill_type {
						display: flex;
						flex-wrap: wrap;
						p {
							width: 112px;
							height: 50px;
							line-height: 50px;
							border: 1px solid #d2d6df;
							font-size: 19px;
							color: #272727;
							text-align: center;
							margin: 0 0 10px 10px;
							cursor: pointer;
							&:hover {
								background: #F2F6FC;
							}
						}
						.gray {
							border: 1px solid #0099e9;
							color: #0099e9;
							background: url('../../../assets/images/manage/sameCity/gou.png') no-repeat right bottom;
							background-size: 20px 16px;
							&:hover {
								background: url('../../../assets/images/manage/sameCity/gou.png') no-repeat right bottom;
								background-size: 20px 16px;
							}
						}
					}
				}
				.platform_lists {
					margin: 10px 0 10px 50px;
					width: 90%;
					border: 1px solid #d2d6df;
					position: relative;
					>p {
						position: absolute;
						top: -6px;
						left: 16%;
						width: 10px;
						height: 10px;
						background: #fff;
						border: 1px solid #d2d6df;
						border-right: none;
						border-bottom: none;
						transform: rotate(45deg);
					}
					.platform_list {
						text-align: center;
						min-height: 312px;
						h4 {
							font-size: 24px;
							color: #272727;
							font-weight: 400;
							margin: 34px;
						}
						.lists {
							display: flex;
							flex-wrap: wrap;
							.list {
								width: 140px;
								margin: 0 0 16px 16px;
								img {
									width: 130px;
									height: 130px;
								}
								h3 {
									height: 48px;
									font-size: 18px;
									color: #272727;
									font-weight: 400;
									margin: 16px 0 4px 0;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
								}
								p {
									font-size: 14px;
									color: #999;
								}
							}
							.no_list {
								margin: 50px auto 30px auto;
							}
						}
					}
				}
			}
			.step3 {
				margin: 42px 0 0 0;
				img {
					width: 127px;
					height: 42px;
				}
			}
			.prices,
			.inventory,
			.seckill_period {
				display: flex;
				align-items: center;
				padding: 0 20px 0 7%;
				margin-top: 40px;
				h3 {
					width: 90px;
					font-size: 15px;
					color: #233040;
					font-weight: 400;
					white-space: nowrap;
				}
				input {
					width: 210px;
					height: 50px;
					line-height: 50px;
					border: 1px solid #d2d6df;
					margin-left: 20px;
					padding: 0 10px;
					font-size: 16px;
					color: #000;
					&::placeholder {
						font-size: 15px;
						color: #c2cdd9;
					}
				}
				.maxs {
					margin-left: 20px;
					color: #F56C6C;
				}
			}
			.seckill_period {
				align-items: flex-start;
				h3 {
					margin-top: 10px;
				}
				.seckill_time {
					text-align: center;
					width: 580px;
					p {
						width: 140px;
						font-size: 20px;
						color: #707070;
						border: 1px solid #d2d6df;
						margin-left: -1px;
						border-top: none;
					}
					.seckill_title {
						height: 50px;
						line-height: 50px;
						display: flex;
						p {
							border-top: 1px solid #d2d6df;
						}
						p:nth-of-type(1) {
							width: 140px;
							height: 50px;
						}
						p:nth-of-type(2) {
							width: 300px;
							height: 50px;
						}
						p:nth-of-type(3) {
							width: 140px;
							height: 50px;
						}
					}
					.time_lists {
						.time_list {
							height: 50px;
							line-height: 50px;
							display: flex;
							p:nth-of-type(1) {
								width: 140px;
								height: 50px;
							}
							p:nth-of-type(2) {
								width: 300px;
								height: 50px;
							}
							p:nth-of-type(3) {
								width: 140px;
								height: 50px;
								display: flex;
								align-items: center;
								justify-content: center;
								button {
									width: 108px;
									height: 38px;
									font-size: 14px;
									color: #fff;
									border-radius: 5px;
								}
							}
							.blues {
								background: #409EFF!important;
							}
						}
						.no_time_list {
							border: none;
							margin-top: 30px;
							color: #8b8b8b;
						}
					}
				}
			}
			.step4 {
				margin: 40px 0 50px 0;
				img {
					width: 127px;
					height: 42px;
				}
			}
			.pay_price {
				display: flex;
				justify-content: flex-end;
				padding: 0 38px;
				h4 {
					font-size: 20px;
					color: #272727;
					font-weight: 400;
					margin-right: 54px;
					span {
						text-decoration: line-through;
					}
				}
				h3 {
					font-size: 25px;
					color: #0099e9;
					font-weight: 400;
				}
			}
			.remain_pay {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: 0 9%;
				margin: 30px 0 65px;
				p {
					font-size: 20px;
					color: #8b8b8b;
				}
				p:nth-of-type(1) {
					margin-left: 13px;
				}
				p:nth-of-type(2) {
					margin-left: 23px;
				}
			}
			.btns {
				display: flex;
				justify-content: center;
				button {
					height: 50px;
					line-height: 50px;
					text-align: center;
					border-radius: 6px;
					font-size: 16px;
				}
				button:nth-of-type(1) {
					width: 140px;
					background: #fff;
					color: #13a0ea;
					margin-right: 45px;
					box-shadow: 0px 0px 8px 6px rgba(0, 0, 0, 0.1);
				}
				button:nth-of-type(2) {
					width: 212px;
					background: #13a0ea;
					color: #fff;
				}
			}
		}
		.search_goods {
			width: 100%;
			height: 90px;
			margin: 0 auto;
			background: #f8f8f8;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.select_imgs {
			text-align: left;
			h6 {
				font-size: 18px;
				color: #233040;
				font-weight: 400;
				margin: 20px 0 10px 0;
			}
			.nav_lists{
				display: flex;
				flex-wrap: wrap;
				padding-bottom: 10px;
				.nav_list{					
					width: 70px;
					height: 40px;
					line-height: 40px;					
					text-align: center;
					margin-top: 8px;
					cursor: pointer;
					&:hover {
						color: #fff;
						background: #0aa770;
					}
				}
				.sel{					
					color: #fff;
					background: #0aa770;
				}
			}
			.model_datas {
				display: flex;
				flex-wrap: wrap;	
				justify-content: space-around;			
				padding-bottom: 20px;
				height: 450px;
				overflow: auto;
				.model_data {
					.model_img {
						position: relative;
						width: 200px;						
						margin: 15px 0 0 0;
						img {
							width: 200px;
							cursor: pointer;
						}
						.sel {
							width: 30px;
							height: 30px;
							position: absolute;
							right: 10px;
							top: 10px;
						}
					}
				}
				.no_goods {
					display: flex;
					justify-content: center;
					margin-top: 100px;								
				}
			}
			.img_datas {
				height: 350px;
				overflow: auto;
				.img_data {
					>p {
						display: flex;
						align-items: center;
						img {
							width: 6px;
							height: 22px;
							margin-right: 6px;
						}
						span {
							font-size: 20px;
							color: #adadad;
						}
					}
					.model_datas {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						padding-bottom: 20px;
						.model_data {
							.model_img {
								position: relative;
								width: 210px;
								margin-top: 10px;
								img {
									width: 210px;
									cursor: pointer;
								}
								.sel {
									width: 30px;
									height: 30px;
									position: absolute;
									right: 10px;
									top: 10px;
								}
							}
						}
					}
				}
			}
			.buttons {
				display: flex;
				justify-content: flex-end;
				button {
					width: 90px;
					height: 30px;
					line-height: 30px;
					border-radius: 6px;
					font-size: 14px;
					margin: 10px 15px 0 0;
				}
				button:nth-of-type(1) {
					background: #0099e9;
					color: #fff;
				}
				button:nth-of-type(2) {
					background: #fff;
					color: #333;
					border: 1px solid #ddd;
				}
			}
		}
		.reds {
			border: 1px solid red!important;
		}
		.payments{		
			padding-bottom: 30px;		
			>p{
				width: 90%;
				margin: 0 auto;
				border-bottom: 1px solid #e5ebed;
				padding: 20px 0;
				margin-bottom: 20px;
				color: #36464e;
			}	
			.sel_payways{
				width: 90%;
				margin: 0 auto;
				display: flex;							
				align-items: center;
				justify-content: space-around;
				p{
					width: 188px;
					height: 62px;					
					border: 1px solid #e5ebed;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					cursor: pointer;										
					span:nth-of-type(1){
						font-size: 14px;
						color: #7f8a8e;
					}
					span:nth-of-type(2){
						font-size: 12px;
						color: #c3ccd2;
					}
				}
				.disable1{
					background: #f7fbfb;
					border: none;
					cursor: default;
				}			
			}			
		}	
		.payments_help{
			padding-bottom: 30px;
			.close{
				text-align: right;
				padding: 0 8px;
				img{
					cursor: pointer;
				}
			}
			>h5{
				width: 88%;
				margin: 0 auto;
				border-bottom: 1px solid #e4e4e3;
				padding: 20px 0;
				margin-bottom: 40px;
				font-size: 15px;
				color: #36464e;				
			}
			.pay_finish{
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 14px 0 20px 0;
				p{
					margin: 0 4px;
				}
				button{
					width: 98px;
					height: 38px;
					line-height: 38px;
					background: #46b3ff;					
					color: #fff;
					border: none;
					border-radius: 4px;
				}
			}
			.go_help{
				width: 40%;
				margin: 0 auto;
				display: flex;
				align-items: center;								
				p{
					color: #3299cd;
					cursor: pointer;
					&:hover{
						text-decoration: underline;
					}
				}
				span{
					width: 8px;
					height: 8px;
					border-top: 1px solid #3299cd;
					border-right: 1px solid #3299cd;
					transform: rotate(45deg);
				}
			}
		}
		.weixinTe{
			font-size: 20px;
			text-align: center;
			margin-bottom: 30px;
		}
		.weixin{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}
</style>